<template>
  <div class="mod-config">
    <el-card>
      <el-form :inline="true" :model="dataForm" size="mini">
        <el-radio-group v-model="typeRadio" size="mini" style="margin-right: 20px;" @change="getOutputChart">
          <el-radio-button label="作业" name="1"></el-radio-button>
          <el-radio-button label="质检" name="2"></el-radio-button>
        </el-radio-group>
        <el-form-item label="结算时间:">
          <el-date-picker v-model="dataForm.startDate" type="month"  placeholder="起始月份" class="month_type" @change="startDateHandle" size="small"></el-date-picker>至
          <el-date-picker v-model="dataForm.endDate" type="month"  placeholder="结束月份" class="month_type" @change="endDateHandle" size="small"></el-date-picker>
        </el-form-item>
        <el-form-item label="作业组:" v-if="typeRadio === '作业'">
          <el-select v-model="dataForm.groupId" placeholder="请选择工作组" clearable  style="width: 150px;" @change="getOutputChart" size="small">
            <el-option v-for="item in workGroupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-printer" type="primary" @click="printChartHandle" size="small">打印</el-button>
          <el-button icon="el-icon-printer" type="success" @click="exportChartHandle" size="small">导出Excel</el-button>
        </el-form-item>
      </el-form>
      <div id="chartId">
        <div class="chart_title">
          <div>{{ typeRadio + '产值统计表'}}</div>
          <div class="date_title">{{monthTitle}}</div>
        </div>
        <!--作业产值表-->
        <div class="table_class" v-loading="dataListLoading" v-if="typeRadio === '作业'">
          <el-row class="table_row">
            <el-col :span="9"><div class="grid-header">项目名称</div></el-col>
            <el-col :span="3"><div class="grid-header">项目负责人</div></el-col>
            <el-col :span="4"><div class="grid-header">项目启动时间</div></el-col>
            <el-col :span="3"><div class="grid-header">作业完成时间</div></el-col>
            <el-col :span="2"><div class="grid-header">实际产值</div></el-col>
            <el-col :span="3"><div class="grid-header">备注</div></el-col>
          </el-row>
          <div v-for="(data, index) in dataList">
            <el-row v-if="data.groupShow" class="table_row">
              <el-col :span="12"><div class="group-header">{{data.groupName}}</div></el-col>
              <el-col :span="12"></el-col>
            </el-row>
            <el-row  v-if="data.groupName != null" class="item_row">
              <el-col :span="9"><div>{{data.projectName}}</div></el-col>
              <el-col :span="3"><div >{{data.projectCharge === null? '&ensp; ':data.projectCharge}}</div></el-col>
              <el-col :span="4"><div >{{data.projectStartDateTime === null? '&ensp; ':data.projectStartDateTime}}</div></el-col>
              <el-col :span="3"><div >{{data.wFinishDateTime === null? '&ensp; ':data.wFinishDateTime}}</div></el-col>
              <el-col :span="2"><div >{{data.projectActuallyOutput}}</div></el-col>
              <el-col :span="2"><div >{{data.outputRemark}}</div></el-col>
            </el-row>
            <el-row  v-if="data.groupName != null && data.footerShow" class="table_row">
              <el-col :span="9"><div class="group-header">{{data.groupName}}:合计{{data.projectSum}}个项目</div></el-col>
              <el-col :span="3"><div class="group-header">{{'&ensp; '}}</div></el-col>
              <el-col :span="4"><div class="group-header">{{'&ensp; '}}</div></el-col>
              <el-col :span="3"><div class="group-header">{{'&ensp; '}}</div></el-col>
              <el-col :span="2"><div class="group-header">{{data.outputSum}}</div></el-col>
              <el-col :span="3"><div class="group-header">{{'&ensp; '}}</div></el-col>
            </el-row>
          </div>
          <el-row  class="table_row item_footer">
            <el-col :span="9"><div class="group-header">总共合计{{totalProjectSum}}个项目</div></el-col>
            <el-col :span="3"><div class="group-header">{{'&ensp; '}}</div></el-col>
            <el-col :span="4"><div class="group-header">{{'&ensp; '}}</div></el-col>
            <el-col :span="3"><div class="group-header">{{'&ensp; '}}</div></el-col>
            <el-col :span="2"><div class="group-header">{{totalOutPut}}</div></el-col>
            <el-col :span="3"><div></div></el-col>
          </el-row>
        </div>
        <!--质检产值表-->
        <div class="table_class" v-loading="dataListLoading" v-if="typeRadio === '质检'">
          <el-row class="table_row">
            <el-col :span="9"><div class="grid-header">项目名称</div></el-col>
            <el-col :span="2"><div class="grid-header">项目负责人</div></el-col>
            <el-col :span="3"><div class="grid-header">项目启动时间</div></el-col>
            <el-col :span="3"><div class="grid-header">质检完成时间</div></el-col>
            <el-col :span="2"><div class="grid-header">质检产值</div></el-col>
            <el-col :span="2"><div class="grid-header">是否外检</div></el-col>
            <el-col :span="3"><div class="grid-header">备注</div></el-col>
          </el-row>
          <div v-for="(data, index) in dataList">
            <el-row v-if="data.groupShow" class="table_row">
              <el-col :span="12"><div class="group-header">{{data.qualityUsername}}</div></el-col>
              <el-col :span="12"></el-col>
            </el-row>
            <el-row class="item_row">
              <el-col :span="9"><div>{{data.projectName}}</div></el-col>
              <el-col :span="2"><div >{{data.projectCharge === null? '&ensp; ':data.projectCharge}}</div></el-col>
              <el-col :span="3"><div >{{data.projectStartDateTime === null? '&ensp; ':data.projectStartDateTime}}</div></el-col>
              <el-col :span="3"><div >{{data.qFinishDateTime === null? '&ensp; ':data.qFinishDateTime}}</div></el-col>
              <el-col :span="2"><div >{{data.projectActuallyOutput === null? '&ensp; ':data.projectActuallyOutput}}</div></el-col>
              <el-col :span="2">
                <div>
                  <span style="color: red" v-if="data.outsideCheck">是</span>
                  <span v-else>否</span>
                </div>
              </el-col>
              <el-col :span="3"><div >{{data.outputRemark}}</div></el-col>
            </el-row>
            <el-row  v-if="data.footerShow" class="table_row">
              <el-col :span="9"><div class="group-header">{{data.qualityUsername}}:合计{{data.projectSum}}个项目</div></el-col>
              <el-col :span="2"><div class="group-header">{{'&ensp; '}}</div></el-col>
              <el-col :span="3"><div class="group-header">{{'&ensp; '}}</div></el-col>
              <el-col :span="3"><div class="group-header">{{'&ensp; '}}</div></el-col>
              <el-col :span="2"><div class="group-header">{{data.outputSum}}</div></el-col>
              <el-col :span="5"><div></div></el-col>
            </el-row>
          </div>
          <el-row  class="table_row item_footer">
            <el-col :span="9"><div class="group-header">总共合计{{totalProjectSum}}个项目</div></el-col>
            <el-col :span="2"><div class="group-header">{{'&ensp; '}}</div></el-col>
            <el-col :span="3"><div class="group-header">{{'&ensp; '}}</div></el-col>
            <el-col :span="3"><div class="group-header">{{'&ensp; '}}</div></el-col>
            <el-col :span="2"><div class="group-header">{{totalOutPut}}</div></el-col>
            <el-col :span="5"><div></div></el-col>
          </el-row>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
  import moment from 'moment'
  import {treeDataTranslate} from '@/utils'
  import Vue from 'vue'

  export default {
    data () {
      return {
        dataForm: {
          groupId: '',
          startDate: '',
          endDate: ''
        },
        typeRadio: '作业',
        monthTitle: '', // 月份标题
        workGroupList: [],
        totalOutput: 0, // 合计总产值
        totalProjectSum: 0,  // 项目合计数
        dataListLoading: false
      }
    },
    activated () {
      let datenow = new Date()
      this.dataForm.startDate = this.dataForm.endDate = new Date(datenow.getFullYear(), datenow.getMonth() - 1, 1)
      this.getWorkGroupDataListFromApi()
      this.getOutputChart()
    },
    methods: {
      // 获取数据列表
      getOutputChart () {
        // 月份标题
        if (this.dataForm.startDate === this.dataForm.endDate) {
          this.monthTitle = this.dataForm.startDate.getFullYear() + '年' + (this.dataForm.startDate.getMonth() + 1) + '月'
        } else {
          this.monthTitle = this.dataForm.startDate.getFullYear() + '年' + (this.dataForm.startDate.getMonth() + 1) + '月至'
            + this.dataForm.endDate.getFullYear() + '年' + (this.dataForm.endDate.getMonth() + 1) + '月'
        }
        let startDate = moment(new Date(this.dataForm.startDate.getFullYear(), this.dataForm.startDate.getMonth(), 1)).format('YYYY-MM-DD')
        let endDate = moment(new Date(this.dataForm.endDate.getFullYear(), this.dataForm.endDate.getMonth() + 1, 1)).format('YYYY-MM-DD')
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/project/chartoutput/list'),
          method: 'get',
          params: this.$http.adornParams({
            'groupId': this.dataForm.groupId,
            'sidx': this.typeRadio === '作业' ? 'work' : 'quality',
            'startDate': startDate,
            'endDate': endDate
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            // this.dataList = data.list
            this.tableDataInit(data.list)
          } else {
            this.dataList = []
          }
          this.dataListLoading = false
        })
      },
      // 表格初始化
      tableDataInit (datalist) {
        this.totalOutPut = 0
        this.totalProjectSum = 0
        this.dataList = []
        let groupName = null
        let qualityUserName = null
        datalist.forEach((item, index) => {
          item.groupShow = false
          item.footerShow = false
          this.totalProjectSum += 1
          let outputtemp = parseFloat((item.projectActuallyOutput == null ? 0 : item.projectActuallyOutput).toFixed(2))
          this.totalOutPut = parseFloat((this.totalOutPut + outputtemp).toFixed(2))
        })
        datalist.forEach((item, index) => {
          if ((this.typeRadio === '作业' && groupName !== item.groupName) || (this.typeRadio === '质检' && qualityUserName !== item.qualityUsername) ) {
            item.groupShow = true
            groupName = item.groupName
            qualityUserName = item.qualityUsername
            let projectSum = 0
            let outputSum = 0
            for (let i = index; i < datalist.length; i++) {
              if ((this.typeRadio === '作业' && datalist[i].groupName === groupName) || (this.typeRadio === '质检' && datalist[i].qualityUsername === qualityUserName)) {
                projectSum += 1
                outputSum += datalist[i].projectActuallyOutput
                datalist[i].projectSum = projectSum
                datalist[i].outputSum = parseFloat(outputSum.toFixed(2))
                if (i >= datalist.length - 1) datalist[i].footerShow = true
              } else {
                datalist[i - 1].footerShow = true
                break
              }
            }
            // this.dataList.push(groupdat)
          }
        })
        this.dataList = datalist
      },
      // 从后台获得工作组数据列表内容  填充至选项
      getWorkGroupDataListFromApi () {
        return new Promise((resolve, reject) => {
          this.$http({
            url: this.$http.adornUrl('/set/workgroup/list'),
            method: 'get'
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.workGroupList = this.getBranchChildList( treeDataTranslate(data.list , 'id' , 'pid') )
              console.log(this.workGroupList)
              resolve(data.list)
            } else {
              this.workGroupList = []
            }
          })
        })
      },
      // 获取所有子部门
      getBranchChildList (branchlist) {
        let childList = []
        for (let branch of branchlist) {
          if (branch.children !== undefined) {
            childList = childList.concat(this.getBranchChildList(branch.children))
          } else {
            childList.push(branch)
          }
        }
        return childList
      },
      // 打印报表
      printChartHandle () {
        const print = document.getElementById('chartId').innerHTML
        // 把当前页面替换成要打印的内容
        document.body.innerHTML = print
        // 打印
        window.print()
        // 刷新页面
        window.location.reload()
      },
      // 导出excel表
      exportChartHandle () {
        this.dataListLoading = true
        let that = this
        let startDate = moment(new Date(this.dataForm.startDate.getFullYear(), this.dataForm.startDate.getMonth(), 1)).format('YYYY-MM-DD')
        let endDate = moment(new Date(this.dataForm.endDate.getFullYear(), this.dataForm.endDate.getMonth() + 1, 1)).format('YYYY-MM-DD')
        let downTitle = this.monthTitle
        let downurl = window.SITE_CONFIG['baseUrl'] + '/project/chartoutput/exportExcel?startDate=' + startDate + '&endDate=' + endDate
                      + '&groupId=' + this.dataForm.groupId + '&sidx=' + (this.typeRadio === '作业' ? 'work' : 'quality')
        let xhr = new XMLHttpRequest()
        // GET请求,请求路径url,async(是否异步)
        xhr.open('GET', downurl, true)
        // 设置请求头参数的方式,如果没有可忽略此行代码
        xhr.setRequestHeader('token', Vue.cookie.get('token'))
        // 设置响应类型为 blob
        xhr.responseType = 'blob'
        // 关键部分
        xhr.onload = function (e) {
          that.dataListLoading = false
          // 如果请求执行成功
          if (this.status === 200) {
            let blob = this.response
            console.log((e))
            let filename = downTitle + '产值统计表' + (that.typeRadio === '作业' ? '(作业组)' : '（质检组）') + '.xls'
            let a = document.createElement('a')
            // 创键临时url对象
            var url = URL.createObjectURL(blob)
            a.href = url
            a.download = filename
            a.click()
            // 释放之前创建的URL对象
            window.URL.revokeObjectURL(url)

          }
        }
        // 发送请求
        xhr.send()
      },
      // 开始时间处理
      startDateHandle () {
        if (this.dataForm.startDate === null) {
          this.dataForm.startDate = new Date()
        }
        this.dataForm.endDate = this.dataForm.startDate
        this.getOutputChart()
      },
      // 结束时间处理
      endDateHandle () {
        if (this.dataForm.startDate === '') {
          this.dataForm.startDate = this.dataForm.endDate
        } else if (this.dataForm.endDate < this.dataForm.startDate) {
          this.dataForm.startDate = this.dataForm.endDate
        }
        this.getOutputChart()
      }
    }
  }
</script>

<style scoped>
  .month_type{
    width: 150px;
  }
  .chart_title{
    width: 100%;
    text-align: center;
    margin-top: 20px;
    font-size: 27px;
    font-weight: 700;
  }
  .chart_title .date_title{
    margin-top: 4px;
    font-size: 18px;
    font-weight: 500;
  }
  .table_class{
    margin-top: 10px;
  }
  .table_class .table_row{
    border-bottom: 1px solid #6f7180;
  }
  .table_class .item_row{
    border-bottom: 1px solid #6f7180;
  }
  .table_class .item_row:hover{
    cursor: pointer;
    background-color: rgba(0, 183, 238, 0.59);
  }
  .table_class .table_row .grid-header{
    font-weight: bolder;
    font-size: 12pt;
    line-height: 150%;
    color: black;
  }
  .table_class .table_row .group-header{
    font-weight: 700;
    font-size: 15px;
  }
  .table_class .item_footer{
    color: #00b7ee;
  }
</style>
